<template>
    <div class="w_100 mb20">
        <ElButton
            v-logAction="{
                page: '/home/service-management',
                item: 'addService',
                descriptions: '用户点击新建服务按钮',
            }"
            class="but_create"
            size="small"
            @click="createServe"
        >
            新建服务
        </ElButton>
        <ElInput
            v-model="keyValue"
            size="small"
            class="w300 ml300"
            placeholder="关键字搜索"
            :prefix-icon="Search"
            @change="initTable"
            @input="initTable"
        />
        <UserBar />
    </div>
    <MessageBar></MessageBar>
    <div class="w_100 mt20 pb20 table_box pt20 pl10 pr10" style="height: calc(100% - 106px)">
        <ElTable :data="tableData" class="pl10 pr10">
            <el-table-column label="序号" type="index" :index="indexMethod"></el-table-column>
            <ElTableColumn prop="" label="图片描述" />
            <ElTableColumn prop="serviceName" label="名称" />
            <ElTableColumn prop="displayPrice" label="价格" />
            <ElTableColumn prop="specificationName" label="规格类型" />
            <!--            <ElTableColumn show-overflow-tooltip prop="serviceDesc" width="500" label="服务描述" />-->
            <ElTableColumn label="操作">
                <template #default="scope">
                    <ElButton
                        v-logAction="{
                            page: '/home/service-management',
                            item: 'editService',
                            descriptions: '用户点击编辑按钮',
                        }"
                        type="text"
                        size="small"
                        @click="handleClick(scope.row)"
                    >
                        编辑
                    </ElButton>

                    <elPopconfirm
                        confirm-button-text="确定"
                        cancel-button-text="取消"
                        :icon="InfoFilled"
                        icon-color="red"
                        title="确定删除此条数据？"
                        confirmButtonType="text"
                        @confirm="deleteServe(scope.row)"
                    >
                        <template #reference>
                            <ElButton
                                v-logAction="{
                                    page: '/home/service-management',
                                    item: 'deleteService',
                                    descriptions: '用户点击删除按钮',
                                }"
                                type="text"
                                size="small"
                            >
                                删除
                            </ElButton>
                        </template>
                    </elPopconfirm>
                </template>
            </ElTableColumn>
        </ElTable>
        <ElPagination
            class="mt20 ml20"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="totals"
            @current-change="handleCurrentChange"
        ></ElPagination>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { getServiceList, deleteService } from '@/api/api.query.util';
import { Search, InfoFilled } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import UserBar from '@/components/UserBar.vue';
import MessageBar from '@/components/MessageBar.vue';

const router = useRouter();
const tableData = ref([]);
const keyValue = ref('');
const currentPage = ref(1);
const totals = ref(0);

initTable();
function initTable() {
    getServiceList({
        method: 'post',
        data: {
            current: currentPage.value,
            size: 10,
            serviceName: keyValue.value,
        },
    }).then((res) => {
        tableData.value = res.result.records;
        totals.value = res.result.total;
    });
}
function indexMethod(index) {
    return index + 1;
}
function initPage() {
    keyValue.value = '';
    currentPage.value = 1;
}
function createServe() {
    router.push({ name: '/home/service-management/modify' });
}
function handleClick(row: any) {
    router.push({ name: '/home/service-management/modify', query: { editsID: row.id } });
}
function handleCurrentChange(current: any) {
    keyValue.value = '';
    currentPage.value = current;
    initTable();
}
function deleteServe(row: any) {
    deleteService({
        method: 'delete',
        data: {
            serviceId: row.id,
        },
    }).then(() => {
        ElMessage.success('删除成功');
        initPage();
        initTable();
    });
}
</script>

<style lang="scss" scoped>
.dis_flex {
    display: flex;
}
</style>
